<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="my">我的产品线</el-menu-item>
      <el-menu-item index="all" v-if="isCanAllProductLine">全部产品线</el-menu-item>
    </el-menu>
    <div style="padding-top:20px">
<!--      <el-button-->
<!--              size="small"-->
<!--              v-if="listQuery.tab=='my'"-->
<!--              @click="toAddCustomer('add')"-->
<!--              type="primary">-->
<!--        客户产品线设置-->
<!--      </el-button>-->
    </div>

    <div style="margin-top: 20px">
    <!--搜索-->
    <el-form :inline="true" :model="listQuery" size="mini" label-width="120px">
      <el-form-item label="客户名称：">
        <el-autocomplete
                clearable
                class="inline-input"
                value-key="customerName"
                :fetch-suggestions="querySearch"
                v-model="listQuery.customerName"
                placeholder="请输入内容"
                :trigger-on-focus="false"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="统一社会信用码：" label-width="150">
        <el-input v-model="listQuery.businessCode" class="input-width" style="width:195px"></el-input>
      </el-form-item>
      <el-form-item label="使用量：">
        <el-select v-model.number="listQuery.customerType" class="input-width" style="width:195px" placeholder="请选择" clearable>
          <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerTypeList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品线：">
        <el-select v-model.number="listQuery.goodsLineId" class="input-width" style="width:195px" placeholder="请选择" clearable>
          <el-option :value="item.goodsLineId" :label="item.goodsLineValue" :key="item.goodsLineId" v-for="item in productLineList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户等级：">
        <el-select v-model.number="listQuery.customerGrade" class="input-width" style="width:195px" placeholder="请选择" clearable>
          <el-option value="A1" label="A1" key="A1"></el-option>
          <el-option value="A2" label="A2" key="A2"></el-option>
          <el-option value="A3" label="A3" key="A3"></el-option>
          <el-option value="A4" label="A4" key="A4"></el-option>
          <el-option value="B" label="B" key="B"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预计成交日期：">
        <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery.transactionEndTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="月毛利区间：">
        <el-select v-model.number="listQuery.customerDegree" class="input-width" style="width:195px" placeholder="请选择" clearable>
          <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerDegreeList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="最后联系日期：">
        <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery.lastTrackingTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="创建日期：">
        <el-date-picker
                :default-time="['00:00:00', '23:59:59']"
                v-model="listQuery.createTime"
                type="daterange"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd HH:mm"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="是否为签约客户：">
        <el-select v-model.number="listQuery.cglIsSignContract" class="input-width" style="width:195px" placeholder="请选择" clearable>
          <el-option :value="1" label="是" :key="1"></el-option>
          <el-option :value="0" label="否" :key="0"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="负责人：" v-if="listQuery.tab == 'all'">
        <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
          <el-option
            v-for="item in userOptionList"
            :key="item.userId"
            :label="item.realName"
            :value="item.userId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
                @click="handleSearchList()"
                type="primary">
          查询
        </el-button>
<!--        <el-button @click="downloadExcel">-->
<!--          导出-->
<!--        </el-button>-->
      </el-form-item>
    </el-form>
  </div>

      <!--数据列表-->
      <div v-if="listQuery.tab">
        <div class="table-container" >
          <el-table
                  @selection-change="handleSelectionChange"
                  v-loading="listLoading"
                  :data="tableData"
                  border
                  style="width: 100%; margin-top: 20px">
            <el-table-column type="selection" width="60" align="center"></el-table-column>
            <el-table-column  align="center" label="ID" prop="customerId" width="80"></el-table-column>
            <el-table-column  align="center" label="金蝶编号" prop="kingNumber"></el-table-column>
            <el-table-column  align="center" label="社会统一信用码" prop="businessCode" width="180"></el-table-column>
            <el-table-column
                    label="公司名称"
                    width="300">
              <template slot-scope="scope">
                <el-link @click="toDetail(scope.row)" type="primary"  style="font-size:12px">
                  {{scope.row.customerName}}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="采购评级"
                    width="100">
              <template slot-scope="scope">
                <span>
                   {{scope.row.customerLabel}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="客户等级"
                    width="100">
              <template slot-scope="scope">
                <span>
                  {{scope.row.customerGrade}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="产品线"
                    width="100">
              <template slot-scope="scope">
                <span>
                  {{scope.row.goodsLineName}}
                </span>
              </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="是否为签约客户"
                    width="120">
              <template slot-scope="scope">
                <span>
                    {{scope.row.cglIsSignContract == 1 ? '是' : '否'}}
                </span>
              </template>
            </el-table-column>


            <el-table-column
                    label="联系人"
                    align="center"
                    width="180">
              <template slot-scope="scope">
                {{scope.row.contactName}}
              </template>
            </el-table-column>
            <el-table-column
                    prop="contactMobile"
                    label="联系方式"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="负责人"
                    width="100"
                    align="center">
              <template slot-scope="scope">
                <span>
                     {{scope.row.chargeName}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
                    label="预计成交日期"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.transactionEndTime}}
              </template>
            </el-table-column>
            <el-table-column
                    prop="customerDegree"
                    label="月毛利区间"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="使用量"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                 <span>
                    {{scope.row.customerType}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column
                    label="最后联系日期"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                 <span>
                    {{scope.row.lastTrackingTime}}
                 </span>
              </template>
            </el-table-column>
            <el-table-column
                    label="创建日期"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                {{scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column
                    width="130"
                    fixed="right"
                    label="操作"
                    align="center">
              <template slot-scope="scope">
<!--                <el-button-->
<!--                        v-if="listQuery.tab == 'my'"-->
<!--                        type="text"-->
<!--                        size="mini"-->
<!--                        @click="toAddCustomer('edit',scope.row)">编辑-->
<!--                </el-button>-->
                <el-button
                        type="text"
                        size="mini"
                        @click="showQuit(scope.row)">转移
                </el-button>
<!--                <el-button-->
<!--                        type="text"-->
<!--                        size="mini"-->
<!--                        @click="showDel('one',scope.row)">删除-->
<!--                </el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div style="width:300px;float:left;margin-top:20px">
<!--          <el-button @click="showDel('more')" size="small" >-->
<!--            批量删除-->
<!--          </el-button>-->
<!--          <el-button-->
<!--                  size="small"-->
<!--                  @click="showQuit('more')">-->
<!--            批量转移-->
<!--          </el-button>-->
        </div>
        <div class="pagination-container">
          <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  layout="total, sizes,prev, pager, next,jumper"
                  :current-page.sync="listQuery.pageNum"
                  :page-size="listQuery.pageSize"
                  :page-sizes="[10,15,20]"
                  :total="count">
          </el-pagination>
        </div>
      </div>


    <!--新增/编辑客户产品线-->
    <el-dialog
      :close-on-click-modal="false"
      title="客户产品线设置"
      :beforeClose="beforeClose"
      :visible.sync="dialogVisible"
      width="600px">
      <el-form :model="customerForm" size="mini" label-width="140px" :rules="rules" ref="customerForm">
        <el-form-item label="客户名称：" prop="customerId">
          <el-select
                  :disabled="dialogType=='edit'"
                  clearable
                  v-model="customerForm.customerId"
                  filterable
                  remote
                  value-key="customerId"
                  reserve-keyword
                  placeholder="请输入关键词"
                  @change="changeCustomer"
                  :remote-method="remoteMethod"
                  :loading="loading">
            <el-option
                    v-for="item in customerList"
                    :key="item.customerId"
                    :label="item.customerName"
                    :value="item.customerId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品线：" prop="goodsLineId">
          <el-radio-group v-model="customerForm.goodsLineId" :disabled="dialogType=='edit'">
            <el-radio :label="item.goodsLineId" v-for="item in myProductLineList" :key="item.goodsLineId" :disabled="item.userName != ''">{{item.goodsLineName}} {{item.userName}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系人：" prop="contactId">
          <el-select v-model="customerForm.contactId">
            <el-option :value="item.contactId" :label="item.contactName" :key="item.contactId" v-for="item in contactList"></el-option>
          </el-select>
          <el-button type="text" style="margin-left:10px;" @click="showContact" :disabled="!customerForm.customerId">新建联系人</el-button>
        </el-form-item>
        <el-form-item label="使用量：" prop="customerType">
          <el-select v-model="customerForm.customerType">
            <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerTypeList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预计成交日期：" prop="transactionEndTime">
          <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="customerForm.transactionEndTime"
                  type="date"
                  placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="月毛利区间：" prop="customerDegree">
          <el-select  v-model="customerForm.customerDegree">
            <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerDegreeList"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading" >确定</el-button>
      </span>
    </el-dialog>
    <!--客户转移-->
    <el-dialog
      :beforeClose="handleClose3"
      :close-on-click-modal="false"
      title="客户转移"
      :visible.sync="dialogVisible3"
      width="420px">
      <el-form :model="quitForm" size="mini" label-width="120px" ref="quitForm" :rules="rules3">
        <el-form-item label=" 客户信息转移到：" prop="target">
          <el-select v-model="quitForm.target" filterable placeholder="请选择">
            <el-option
              v-for="item in list2"
              :key="item.userId"
              :label="item.realName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose3">取 消</el-button>
          <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
      </span>
    </el-dialog>

    <!--新增联系人-->
    <el-dialog
            :close-on-click-modal="false"
            title="新增联系人"
            :beforeClose="handleClose5"
            :visible.sync="dialogVisible5"
            width="400px">
      <el-form :model="contactForm" size="mini" label-width="120px" :rules="rules5" ref="contactForm">
        <el-form-item label=" 联系人姓名：" prop="contactName">
          <el-input v-model="contactForm.contactName" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="contactMobile">
          <el-input v-model="contactForm.contactMobile" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="职务：" prop="contactDuty">
          <el-input v-model="contactForm.contactDuty" style="width:150px"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose5">取 消</el-button>
          <el-button type="primary" @click="handleConfirm5" :loading="btnLoading5">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
    import {batchMove,getGoodsLineList,setGoodsLine,batchDel,myCustomerGoodsLine,getCustomerOption,getCustomerSetting,getUserOption,updateCustomers,getCustomersInfo,exportCustomers,setCustomerMove,checkBusinessCode,delCustomer,getCompanyInfo,getBlackList,unOrderCustomers,goodsLineList,getContactList,addContact} from '@/api/partner'
    import {getStaffsList} from '@/api/management'
    import {formatDate} from '@/utils/date';
    import {validatePhone} from '@/utils/validate';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    const defaultCustomerForm = {
        cglId:0,
        customerId:null,
        contactId:null,
        transactionEndTime:null,
        customerDegree:null,
        customerType:null,
        goodsLineId:null,
    };
    const defaultListQuery={
      pageNum: 1,
      pageSize: 10,
      businessCode: '',
      customerName:'',
      customerType:'',
      goodsLineId:null,
      customerDegree:null,
      customerGrade:null,
      transactionEndTime:null,
      lastTrackingTime:null,
      createTime:null,
      tab:'my',
      cglIsSignContract:null,
      userId:''
    };
    const defaultContactForm = {
      contactName:null,
      contactMobile:null,
      contactDuty:null,
    };
    export default {
      name: "index",
      data(){
          const isvalidatePhone = (rule, value, callback) => {
              if(!validatePhone(value)){
                  callback(new Error('请输入正确的手机号'))
              } else {
                  callback()
              }
          };
          const isdiQuIds = (rule, value, callback) => {
            if(!this.diQuIds.length){
              callback(new Error('请选择所在地区'))
            } else {
              callback()
            }
          };
          return {
              activeIndex: '1',
              creator:'',
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              time: '',
              tableData: [],
              count: 0,
              listLoading: false,
              customerTypeList: [],
              customerDegreeList: [],
              userOptionList:[],
              roles:store.getters.roles ? store.getters.roles : [],
              dialogVisible:false,
              title:'',
              customerForm:JSON.parse(JSON.stringify(defaultCustomerForm)),
              rules:{
                  customerId:[{required: true, message: '请选择客户', trigger: 'change'},],
                  contactId:[{required: true, message: '请选择联系人', trigger: 'change'}],
                  transactionEndTime:[{required: true, message: '请选择预计成交时间', trigger: 'change'}],
                  customerDegree:[{required: true, message: '请选择月利区间', trigger: 'change'},],
                  customerType:[{required: true, message: '请选择使用量', trigger: 'change'},],
                  goodsLineId:[{required: true, message: '请选择产品线', trigger: 'change'},]

              },
              btnLoading:false,
              diQuIds:[],
              dialogVisible3:false,
              quitForm:{
                  target:null,
              },
              rules3:{
                target:[{required: true, message: '请选择转移目标', trigger: 'change'},]
              },
              list2:[],
              btnLoading3:false,
              multipleSelection:[],
              showClose:true,
              dialogType:'',//弹窗类型
              dialogVisible5:false,
              contactForm:JSON.parse(JSON.stringify(defaultContactForm)),
              btnLoading5:false,
              customerList:[],
              loading:false,
              productLineList:[],
              contactList:[],
            rules5:{
              contactName:[{required: true, message: '请输入联系人姓名', trigger: 'blur'},],
              contactMobile:[{required: true, message: '请输入联系人电话', trigger: 'blur'},],
              contactDuty:[{required: true, message: '请输入联系人职位', trigger: 'blur'},],
            },
            myProductLineList:[],

          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),
          isCanAllProductLine(){
              if(this.roles.indexOf("allProductLine") != -1){
                  return true
              }else{
                  return false
              }
          },
      },
      created() {
        if (localStorage.getItem('productLineListQuery')){
          this.listQuery = JSON.parse(localStorage.getItem('productLineListQuery'));
          localStorage.removeItem('productLineListQuery');
        }
        this.getUserList();
        this.getUserOptionList();
        this.getCustomerSettingList();
        this.getGoodsLineList();

      },
      filters: {
        formatCreateTime(time) {
          if(time){
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
          }else{
            return '--'
          }
        },
      },
      methods: {
        //获取指定客户产品线负责人
        getMyCustomerGoodsLine(){
          myCustomerGoodsLine({customerId:this.customerForm.customerId}).then((res)=>{
              this.myProductLineList = res;
          })
        },
        //显示联系人弹窗
        showContact(){
          this.dialogVisible5 = true;
          this.contactForm = JSON.parse(JSON.stringify(defaultContactForm));
          this.contactForm.customerId = this.customerForm.customerId
        },

        //关闭联系人弹窗
        handleClose5(){
          this.$refs.contactForm.clearValidate();
          this.dialogVisible5 = false;
          this.btnLoading5 = false;
        },

        //提交联系人
        handleConfirm5(){
          this.$refs.contactForm.validate((valid) => {
            if (valid) {
              this.btnLoading5 = true;
              let data = JSON.parse(JSON.stringify(this.contactForm));
              addContact(data).then((res)=>{
                this.btnLoading5 = false;
                this.handleClose5();
                this.getContactListData();
              }).catch(()=>{
                this.btnLoading5 = false;
              })
            }
          })
        },
        //获取产品线选项列表
        getGoodsLineList(){
          goodsLineList().then((res)=>{
            this.productLineList = res;
          })
        },

        //获取指定客户的联系人列表
        getContactListData(){
          getContactList({customerId:this.customerForm.customerId}).then((res)=>{
            this.contactList = res;
          })
        },

        //切换客户
        changeCustomer(item){
          this.customerForm.contactId = null;
          if(item){
            this.getContactListData();
            this.getMyCustomerGoodsLine();
          }
        },
        //获取客户列表
        remoteMethod(query) {
          if(query && query!= ''){
            this.loading = true;
            getCustomerOption({keywords:query}).then(response => {
              this.customerList = response;
              this.loading = false;
            }).catch(()=>{
              this.loading = false;
            });
          }
        },

          //多选表格项
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },

          //显示转移弹窗
          showQuit(item){
            this.dialogVisible3 = true;
            this.quitForm.target = null;
            this.multipleSelection = [];
            this.multipleSelection.push(item);
            getStaffsList({pageNum:1,pageSize:1000,goodsLineId:item.goodsLineId}).then(response => {
              this.list2 = response.list
            });

          },
          //关闭转移弹窗
          handleClose3(){
              this.dialogVisible3 = false;
              this.btnLoading3 = false;
              this.quitForm.target = 0;
              this.multipleSelection = [];
          },

          //确认转移
          handleConfirm3(){
            this.$refs.quitForm.validate((valid) => {
              if (valid) {
                let ids=[];
                for(let i=0;i<this.multipleSelection.length;i++){
                  ids.push(this.multipleSelection[i].cglId);
                }
                this.btnLoading3 = true;
                let data = {};
                data.cglIds = ids.join(",");
                data.newUserId = this.quitForm.target;
                batchMove(data).then((res)=>{
                  this.btnLoading3 = false;
                  this.handleClose3();
                  this.getUserList();
                }).catch(()=>{
                  this.btnLoading3 = false;
                })
              }
            })
          },


        //确认删除
        handleConfirm4(){
          this.$confirm('确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let ids=[];
            this.btnLoading4 = true;
            for(let i=0;i<this.multipleSelection.length;i++){
              ids.push(this.multipleSelection[i].cglId);
            }
            let data = {};
            data.cglIds = ids.join(",");
            batchDel(data).then((res)=>{
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getUserList();
            })
          }).catch(() => {
            this.multipleSelection = [];
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },

        //删除
        showDel(type,item){
          switch (type) {
            case 'more':
              if(this.multipleSelection.length > 0){
                this.handleConfirm4();
              }else{
                this.$message({
                  message: '请选择要删除的客户',
                  type: 'warning',
                  duration: 1000
                });
              }
              break;
            case 'one':
              this.multipleSelection.push(item);
              this.handleConfirm4();
          }
        },
          //显示新建编辑客户弹窗
          toAddCustomer(type,item){
              this.dialogVisible = true;
              this.dialogType = type;
              if(type == 'add'){ //新增
                  this.customerForm = JSON.parse(JSON.stringify(defaultCustomerForm));
                  this.myProductLineList = [];
                  setTimeout(()=>{
                    this.$refs.customerForm.clearValidate();
                  },100)
              }else{ //编辑
                  this.customerForm.cglId = item.cglId;
                  this.customerForm.contactId = item.contactId;
                  this.customerForm.transactionEndTime = item.transactionEndTime;
                  this.customerForm.customerDegree = item.customerDegreeId;
                  this.customerForm.customerType = item.customerTypeId;
                  this.customerForm.customerId = item.customerId;
                  this.customerForm.goodsLineId = item.goodsLineId+'';
                  this.getContactListData();
                  this.getMyCustomerGoodsLine();
                  this.remoteMethod(item.customerName)
              }
          },

          //关闭新建编辑弹窗之前
          beforeClose(){
              this.$refs.customerForm.clearValidate();
              this.dialogVisible = false;

          },

          //关闭新建编辑弹窗
          handleClose(){
              this.$refs.customerForm.clearValidate();
              this.dialogVisible = false;

          },

          //提交新建编辑
          handleConfirm(){
              this.$refs.customerForm.validate((valid) => {
                  if (valid) {
                      this.btnLoading = true;
                      let data = JSON.parse(JSON.stringify(this.customerForm));
                      setGoodsLine(data).then(()=>{
                          this.btnLoading = false;
                          this.handleClose();
                          this.getUserList();
                      }).catch(()=>{
                          this.btnLoading = false;
                      })
                  }
                })
          },

          //获取员工下拉选项
          getUserOptionList(){
              getUserOption().then((res)=>{
                  this.userOptionList = res;
              })
          },

          //选择员工名称
          handleSelectUserName(key,item){
              this.listQuery[key] = item.userId;
          },


          //客户名称输入匹配
          querySearch(queryString, cb){
              getCustomerOption({keywords:queryString}).then((res)=>{
                  cb(res);
              })
          },


          //选择客户名称
          handleSelectCustomerName(item){
              this.listQuery.customerName = item.customerName
          },



          //获取客户配置
          getCustomerSettingList(){
              getCustomerSetting().then((res)=>{
                  res.forEach((el)=>{
                       if(el.cdtCode == 'customer_type'){
                          this.customerTypeList = el.data;
                      } else if(el.cdtCode == 'customer_degree'){
                          this.customerDegreeList = el.data;
                      }
                  });
              })
          },

        /**
         * 切换选择状态
         */
        handleSelect(key, keyPath){
          // this.listQuery = JSON.parse(JSON.stringify(defaultListQuery));
          this.listQuery.tab = key;
          this.handleSearchList();

        },
        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getUserList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getUserList();
        },

        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getUserList();
        },

        //获取客户列表
        getUserList() {
          this.listLoading = true;
          if(this.listQuery.tab == 'my'){
            this.listQuery.userId = ''
          }
          getGoodsLineList(this.listQuery).then(response => {
            this.tableData = response.list;
            this.count = response.count;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          });
        },

        //去详情页
        toDetail(item){
          localStorage.setItem('customerListQuery', JSON.stringify(this.listQuery));
          this.$router.push({name:'customerDetail',query:{id:item.customerId}})
        },



        //下载excle
        downloadExcel(){
          let params = JSON.parse(JSON.stringify(this.listQuery));
          exportCustomers(params).then((res)=>{
            require.ensure([], () => {
              const { export_json_to_excel } = require('sheet/Export2Excel');
              const tHeader = res.title;
              const filterVal = res.columns;
              const list = res.list;
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, res.fileName);
            })
          })
        },

        //下载表格数据格式化
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        },

      },
    }
</script>

<style scoped lang="scss">
  .upload-div{
    text-align: center;
    position:relative;
    #upload{

      opacity: 0;
      position: absolute;
      z-index: 1;
      width:154px;
      height:40px
    }
  }
</style>
